<template>
  <div class="container mx-auto max-w-screen-xl mt-5">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
      
      <!-- 左侧主内容区域 -->
      <div class="lg:col-span-3">
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 p-6">
          <!-- 文章头部信息 -->
          <div class="mb-6">
            <h1 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">
              {{ article.title || '文章标题' }}
            </h1>
            
            <!-- 文章meta信息 -->
            <div class="flex items-center text-gray-500 text-sm mb-4">
              <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path d="M6 2a1 1 0 000 2h8a1 1 0 100-2H6zM5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5z"></path>
              </svg>
              <span class="mr-4">发布时间：{{ article.createTime || '2024-01-01' }}</span>
              
              <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <span class="mr-4">分类：{{ article.category?.name || '默认分类' }}</span>
              
              <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path>
              </svg>
              <span>阅读量：{{ article.viewCount || 0 }}</span>
            </div>
            
            <!-- 文章标签 -->
            <div class="mb-4" v-if="article.tags && article.tags.length > 0">
              <span 
                v-for="tag in article.tags" 
                :key="tag.id"
                class="inline-block bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-blue-200 cursor-pointer dark:bg-blue-900 dark:text-blue-300"
                @click="goTagPage(tag.id, tag.name)"
              >
                {{ tag.name }}
              </span>
            </div>
          </div>
          
          <!-- 文章封面图 -->
          <div class="mb-6" v-if="article.titleImage">
            <img 
              :src="article.titleImage" 
              :alt="article.title"
              class="w-full h-auto rounded-lg"
            />
          </div>
          
          <!-- 文章内容 -->
          <div class="prose prose-lg max-w-none dark:prose-invert">
            <div v-if="article.content" v-html="article.content"></div>
            <div v-else class="text-gray-500 dark:text-gray-400">
              <p>文章内容加载中...</p>
              <p>这里是文章的详细内容。你可以在这里展示完整的文章正文。</p>
              <p>支持富文本编辑器生成的HTML内容显示。</p>
            </div>
          </div>
          
          <!-- 文章底部操作 -->
          <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-4">
                <button class="flex items-center text-gray-500 hover:text-blue-600 transition-colors">
                  <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                  </svg>
                  点赞
                </button>
                <button class="flex items-center text-gray-500 hover:text-blue-600 transition-colors">
                  <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                  </svg>
                  评论
                </button>
                <button class="flex items-center text-gray-500 hover:text-blue-600 transition-colors">
                  <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
                  </svg>
                  分享
                </button>
              </div>
              
              <button 
                @click="goBack"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                返回列表
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右边栏 -->
      <div class="lg:col-span-1">
        <div class="sticky top-21">
          <!-- 用户信息卡片 -->
          <UserInfoCard></UserInfoCard>
          
          <!-- 相关文章 -->
          <div class="mb-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 p-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">相关文章</h3>
            <div class="space-y-3">
              <div 
                v-for="relatedArticle in relatedArticles" 
                :key="relatedArticle.id"
                class="block p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer transition-colors dark:bg-gray-700 dark:hover:bg-gray-600"
                @click="goToRelatedArticle(relatedArticle.id)"
              >
                <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-1">
                  {{ relatedArticle.title }}
                </h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">
                  {{ relatedArticle.createTime }}
                </p>
              </div>
            </div>
          </div>
          
          <!-- 目录 -->
          <div class="mb-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 p-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">文章目录</h3>
            <div class="space-y-2">
              <a href="#section1" class="block text-sm text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400">
                1. 介绍
              </a>
              <a href="#section2" class="block text-sm text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400">
                2. 主要内容
              </a>
              <a href="#section3" class="block text-sm text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400">
                3. 总结
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue'
import { getArticleDetail } from '@/service/api/blog/AdminCategoryController'

const router = useRouter()
const route = useRoute()

// 文章数据
const article = ref({
  id: '',
  title: '',
  content: '',
  titleImage: '',
  createTime: '',
  category: { name: '' },
  tags: [],
  viewCount: 0
})

// 相关文章数据
const relatedArticles = ref([
  { id: 1, title: '相关文章1', createTime: '2024-01-01' },
  { id: 2, title: '相关文章2', createTime: '2024-01-02' },
  { id: 3, title: '相关文章3', createTime: '2024-01-03' }
])

// 获取文章详情
const fetchArticleDetail = async () => {
  const articleId = route.query.articleId
  if (articleId) {
    try {
      const response = await getArticleDetail(articleId)
      if (response.data) {
        article.value = response.data
      }
    } catch (error) {
      console.error('获取文章详情失败:', error)
    }
  }
}

// 跳转到标签页面
const goTagPage = (tagId: any, tagName: string) => {
  router.push({ path: '/client/tags', query: { id: tagId, name: tagName } })
}

// 跳转到相关文章
const goToRelatedArticle = (articleId: any) => {
  router.push({ path: '/client/article-detail', query: { articleId } })
}

// 返回列表
const goBack = () => {
  router.go(-1)
}

// 页面挂载时获取文章详情
onMounted(() => {
  fetchArticleDetail()
})
</script>

<style scoped>
.prose {
  max-width: none;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose p {
  margin-bottom: 1em;
}

.prose img {
  border-radius: 0.5rem;
}
</style> 